const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
      }
    ],
  },
  filters: {
    showPrice(value) {
      return '￥' + value.toFixed(2);
    }
  },
  computed: {
    totalPrice() {
      // let total = 0;
      // for (let book of this.books) {
      //    total += book.price * book.count;
      // }
      // return total;

      // 高阶函数 数组reduce 
      return this.books.reduce((pre,book) => pre + book.price * book.count,0);

    }
  },
  methods: {
    decrement(index) {
      this.books[index].count--;
    },
    increment(index) {
      this.books[index].count++;
    },
    removeHandler(index) {
      this.books.splice(index, 1);
    }
  }
})

// 编程范式： 命令式编程 / 声明式编程(Vue)  面向对象编程/函数式编程
// filter / map / reduce
const nums = [10, 20, 30, 40, 50, 110, 33, 70];
console.log("老数组" + nums);

// 函数式编程一步到位
let totals = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n, 0);
console.log("小于100且乘以2倍的求和：" + totals);

// 1.filter函数的使用（条件过滤）
// filter中的回调函数有一个要求：必须返回一个boolean值
// true：函数内部会自动将这次回调的n加入到新的数组中
// false: 函数内部会过滤掉这次的n
let newNums = nums.filter(n => {
  // 返回满足小于100的元素，过滤掉不符合条件的值
  return n < 100;
  // 返回原数组n
  // return n*2;
});
console.log("小于100的新数组：" + newNums);

// 2. map函数的使用（对数组遍历处理）
let new2Nums = nums.map(n => {
  return n * 2;
});
console.log('map处理的数组：' + new2Nums);

// 3.reduct()函数：对数组中的所有内容进行汇总
let total = nums.reduce(function (preValue, n) {
  return preValue + n;
}, 0);
// 第一次： preValue 0 n 10 （0为初始化值）
// 第二次： preValue 10 n 20
// ...
console.log("总计：" + total);
